{literal}
    <script type="text/javascript" src="js/jquery.popupWindow.js"></script>
    <script type="text/javascript"> 
        jQuery(document).ready(function(){
             
            $('.openInNewWindow').popupWindow({
                        width: 770,
                        centerBrowser:1 
                    });
        });
        
    </script>
    
<!--    <script>
        $(function() { $('#scroll-pane').jScrollPane(); });
    </script>-->
    
    
    <style>
        #scroll-pane {
			margin: 0 auto;
			width: 955px;
			overflow: auto;
			height: 205px;
			margin-top: 50px;
			margin-bottom: 20px;
		}
        .horizontal-only {
            height: auto;
            max-height: 200px;
        }
    </style>

{/literal}

<div style="left:20px; top:20px;  position: relative; margin: 0 auto; width: 200px;"><h3>Itinerary List</h3></div>
<div id="scroll-pane" style="left:20px; top:20px; position: relative">
    <ul>
    {for $index=0 to $bookingCount-1}
    <li><a class="openInNewWindow" href="http://travel.ian.com/index.jsp?pageName=viewOrCancelReservation&currencyCode=EUR&additionalDataString=vrBookingSource|index&locale=en_us_US&cid=550555&itineraryID={$booking[$index]['itineraryId']}&email={$booking[$index]['email']}"><h5>Itinerary id: {$booking[$index]['itineraryId']} - Location: {$booking[$index]['location']}, Creation date: {$booking[$index]['bookingDate']}, Number of guests: {$booking[$index]['guestsCount']}, E-mail used: {$booking[$index]['email']}</h5></a></li>
    {/for}
    </ul>
</div>